<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 添加图标 -->
    <link rel="shortcut icon" href="./favicon.ico">
    <meta charset="UTF-8">
    <title>注册</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- 引入Vue -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import Element UI -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <!-- 导入层叠样式表 -->
    <link rel="stylesheet" href="./css/register.css">
<body>
<div id="app">
    <el-card>
        <h2>用户注册大厅</h2>
        <el-form :model="user" ref="user" :rules="rules" label-width="80px">
            <el-form-item label="手机号" prop="username">
                <el-input type="text" v-model="user.username" prefix-icon="el-icon-user-solid"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="text" v-model="user.password" prefix-icon="el-icon-lock" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPassword">
                <el-input type="text" v-model="user.checkPassword" prefix-icon="el-icon-lock" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="register()">注册</el-button>
                <el-button type="primary" @click="Reset">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</body>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                user: {
                    username: '19948999072',
                    password: '123456',
                    checkPassword: '123456',
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {
                            relax: /^(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                            message: '请输入正确的手机号',
                            trigger: 'blur'
                        }
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}],
                    checkPassword: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'},
                        // 对两次的密码进行校验,判断是否相同
                        {
                            validator: (rule, value, callback) => {
                                if (value !== v.user.password) {
                                    callback(new Error('两次密码不一致'))
                                }
                            }
                        }],
                }
            }
        },
        methods: {
            Reset() {
                v.user.username = '';
                v.user.password = '';
                v.user.checkPassword = '';
            },
            register() {
                // 执行所有校验
                axios.post('/user/addUser', v.user).then(function (response) {
                    let resonseBody = response.data;
                    if (resonseBody.state === 20000) {
                        alert('注册成功')
                        location.href = '/login.html'
                    } else if (resonseBody.state === 40000){
                        alert(resonseBody.message);
                        location.href = '/login.html'
                    }
                })
            }
        }
    })
</script>
</html>